<template>
  <el-dialog
    :title="record !== undefined ? '编辑服务与承诺' : '新增服务与承诺'"
    width="50%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :destroyOnClose="true"
    append-to-body
    @close="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item label="服务名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            placeholder="请输入服务与承诺的名称"
            v-decorator="['name', {rules: [{required: true, min: 2, message: '请输入至少2个字符'}]}]"
          />
        </a-form-item>
        <a-form-item label="概述" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea
            placeholder="请输入概述内容 (300个字符以内)"
            :autoSize="{ minRows: 4 }"
            v-decorator="['summary']"
          />
        </a-form-item>
        <a-form-item label="是否默认" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="新增商品时是否默认勾选">
          <a-radio-group v-decorator="['isDefault', {initialValue: 1, rules: [{required: true}]}]">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端是否展示">
          <a-radio-group v-decorator="['status', {initialValue: 1, rules: [{required: true}]}]">
            <a-radio :value="1">显示</a-radio>
            <a-radio :value="0">隐藏</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
          <a-input-number
            :min="0"
            :precision="0"
            v-decorator="['sort', {initialValue: 100, rules: [{required: true, message: '请输入至少1个数字'}]}]"
          />
        </a-form-item>
      </a-form>
    </a-spin>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" @click="handleSubmit">保存</el-button>
      <el-button size="small" @click="visible = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import * as Api from '@/api/category'
// import { SelectImage } from '@/components'
// import CategoryModel from '@/common/model/Category'
import { getAction, putAction, deleteAction, downPostFile, postAction } from '@/api/manage'
import { ACCESS_TOKEN, TENANT_ID, ACCOUNT_BOOK } from '@/store/mutation-types'
import Vue from 'vue'

export default {
  components: {
    // SelectImage
  },
  props: {
    
  },
  data() {
    return {
      // 账套id
      accountBookId: Vue.ls.get(ACCOUNT_BOOK).id,
      // 对话框标题
      title: '',
      // 标签布局属性
      labelCol: {
        span: 7,
      },
      // 输入框布局属性
      wrapperCol: {
        span: 13,
      },
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      // 当前表单元素
      form: this.$form.createForm(this),

      record: undefined,
    }
  },
  methods: {
    // 显示对话框
    add(record) {
      console.log(record, 'record', record !== undefined)
      // 显示窗口
      this.visible = true
      if (record !== undefined) {
        // 当前服务与承诺记录
        this.record = record
        // 设置默认值
        this.setFieldsValue()
      }
    },

    // 设置默认值
    setFieldsValue() {
      console.log(this.record, '11this.record')
      const {
        record,
        form: { setFieldsValue },
      } = this
      // 设置表单内容
      this.$nextTick(() => {
        setFieldsValue(_.pick(record, ['name', 'summary', 'status', 'sort','isDefault']))
      })
    },

    // 确认按钮
    handleSubmit(e) {
      e.preventDefault()
      // 表单验证
      const {
        form: { validateFields },
      } = this
      validateFields((errors, values) => {
        // 提交到后端api
        if (!errors) {
          this.onFormSubmit(values)
        }
      })
    },

    // 关闭对话框事件
    handleCancel() {
      console.log('关闭')
      this.visible = false
      this.form.resetFields()
      this.record = undefined
    },

    // 提交到后端api
    onFormSubmit(values) {
      this.confirmLoading = true
      if (this.record !== undefined) {
        putAction('/goods/yoshopGoodsService/edit', {
          ...values,
          storeId: this.accountBookId,
          serviceId: this.record.serviceId,
        })
          .then((result) => {
            if (result.success) {
            // 显示成功
            this.$message.success(result.message, 1.5)
            // 关闭对话框事件
            this.handleCancel()
            // 通知父端组件提交完成了
              this.$emit('handleSubmit', values)
            } else {
              this.$message.error(result.message, 1.5)
            }
          })
          .finally((result) => {
            this.confirmLoading = false
          })
      } else {
        postAction('/goods/yoshopGoodsService/add', { ...values, storeId: this.accountBookId })
          .then((result) => {
            if (result.success) {
            // 显示成功
            this.$message.success(result.message, 1.5)
            // 关闭对话框事件
            this.handleCancel()
            // 通知父端组件提交完成了
              this.$emit('handleSubmit', values)
            } else {
              this.$message.error(result.message, 1.5)
            }
          })
          .finally((result) => {
            this.confirmLoading = false
          })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__footer {
  border-top: 1px solid #e3e3e3;
}
::v-deep .el-upload--picture-card {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uploader {
  width: 80px;
  height: 80px;
  overflow: hidden;
  position: relative;
}
.attachment_view {
  border: 1px dashed white;
  width: 80px;
  height: 80px;
  background-color: #f6f6f6;
  line-height: 40px;
  text-align: center;
}
.attachment_mask {
  z-index: 2;
  position: absolute;
  right: 0;
  top: 0;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
}
.attachment_mask_pre {
  z-index: 1;
  position: absolute;
  display: flex;
  align-items: center;
  pointer-events: none;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  // backdrop-filter: blur(1px);
  img {
    position: absolute;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }
}
</style>
